<!-- search START -->
<nz-card class="m-b-2">
    <div class="common-search-wrap">
        <div class="common-search-btns">
            <button
                *ngIf="permission.userPermission.has('marketing:descentManage:add')"
                nz-button nzType="primary"
                [routerLink]="['/sell/descentAddedit']"
                [queryParams]="{ id: '-1', type: 0 }">
                新增直降促销
            </button>
        </div>

        <div class="common-search-forms">
            <div class="common-form-item">
                <label class="common-search-label">名称</label>
                <div class="common-search-conrol">
                    <input nz-input placeholder="请输入名称" [(ngModel)]="seachParams.name" />
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">状态</label>
                <div class="common-search-conrol">
                    <nz-select
                        nzShowSearch
                        nzAllowClear
                        nzPlaceHolder="全部"
                        [(ngModel)]="seachParams.status">
                        <nz-option
                            *ngFor="let item of statusOptions"
                            [nzLabel]="item.label"
                            [nzValue]="item.value">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">类型</label>
                <div class="common-search-conrol">
                    <nz-select
                        nzShowSearch
                        nzAllowClear
                        nzPlaceHolder="全部"
                        [(ngModel)]="seachParams.type">
                        <nz-option nzLabel="满减" [nzValue]="1"></nz-option>
                        <nz-option nzLabel="满折" [nzValue]="2"></nz-option>
                        <nz-option nzLabel="多件折扣" [nzValue]="3"></nz-option>
                        <nz-option nzLabel="多件立减" [nzValue]="4"></nz-option>
                        <nz-option nzLabel="阶梯满减" [nzValue]="5"></nz-option>
                        <nz-option nzLabel="阶梯折扣" [nzValue]="6"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <div class="common-search-conrol">
                    <button nz-button nzType="primary" class="m-r-8" (click)="queryData()">查询</button>
                    <button nz-button nzType="default" (click)="resetData()">重置</button>
                </div>
            </div>
        </div>
    </div>
</nz-card>
<!-- search END -->

<nz-card>
    <main class="pagination-wrap-position">
        <!-- Table -->
        <div class="table-wrap">
            <nz-table
                #basicTable
                nzSize="small"
                nzShowSizeChanger
                nzShowQuickJumper
                nzOuterBordered
                [nzScroll]="{ x: '1000px' }"
                [nzFrontPagination]="false"
                [nzLoadingDelay]="100"
                [nzLoading]="tableForms.tableLoading"
                [nzData]="tableData"
                [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
                [nzTotal]="tableForms.total"
                [nzPageIndex]="tableForms.page"
                [nzPageSize]="tableForms.pageSize"
                [nzShowTotal]="totalTemplate"
                (nzPageIndexChange)="onPageIndexChange($event)"
                (nzPageSizeChange)="onPageSizeChange($event)"
            >
                <thead>
                    <tr>
                        <th nzAlign="center" nzWidth="100px" nzLeft>ID</th>
                        <th nzAlign="center" nzWidth="150px">状态</th>
                        <th nzAlign="center" nzWidth="200px">类型</th>
                        <th nzAlign="center" nzWidth="250px">活动名称</th>
                        <th nzAlign="center" nzWidth="200px">优惠内容</th>
                        <th nzAlign="center" nzWidth="150px">适用用户</th>
                        <th nzAlign="center" nzWidth="180px">生效开始时间</th>
                        <th nzAlign="center" nzWidth="180px">生效截至时间</th>
                        <th nzAlign="center" nzWidth="150px">可用商品</th>
                        <th nzAlign="center" nzWidth="320px" nzRight>操作</th>
                    </tr>
                </thead>
    
                <tbody>
                    <tr *ngFor="let data of basicTable.data">
                        <td nzAlign="center" nzLeft>{{ data.id }}</td>
                        <td nzAlign="center">
                            <span [ngStyle]="{'color': data.status | stateStatus: 'color'}">
                                {{ data.status | stateStatus: 'text' }}
                            </span>
                        </td>
                        <td nzAlign="center">{{ data.type | activityTypeStatus }}</td>
                        <td nzAlign="center" nzBreakWord>{{ data.name || '-' }}</td>
                        <td nzAlign="center">{{ data.remark || '-' }}</td>
                        <td nzAlign="center">
                            <nz-tag [nzColor]="'#2db7f5'" *ngIf="data.userType == 2">B端</nz-tag>
                            <nz-tag [nzColor]="'#87d068'" *ngIf="data.userType == 1">C端</nz-tag>
                            <nz-tag *ngIf="data.userType == 0">通用</nz-tag>
                        </td>
                        <td nzAlign="center">{{ data.beginTime || '-' }}</td>
                        <td nzAlign="center">{{ data.endTime || '-' }}</td>
                        <td nzAlign="center">
                            <span [ngStyle]="{'color': data.filterWay == 0 ? '#FF9900' : ''}">
                                {{ data.filterWay == 0 ? '部分商品可用' : (data.filterWay == 1 ? '全部商品可用' : '-') }}
                            </span>
                        </td>
                        <td nzAlign="center" nzRight>
                            <button
                                nz-button
                                nzType="link"
                                nzSize="small"
                                [routerLink]="['/sell/descentDetails', data.id]"
                            >查看</button>

                            <button
                                *ngIf="permission.userPermission.has('marketing:descentManage:edit')"
                                nz-button
                                nzType="link"
                                nzSize="small"
                                [routerLink]="['/sell/descentAddedit']"
                                [queryParams]="{ id: data.id, type: 1 }"
                                [disabled]="data.status == 3 || data.status == 4">
                                编辑
                            </button>

                            <button
                                *ngIf="permission.userPermission.has('marketing:descentManage:add')"
                                nz-button
                                nzType="link"
                                nzSize="small"
                                [routerLink]="['/sell/descentAddedit']"
                                [queryParams]="{ id: data.id, type: 2 }">
                                复制
                            </button>

                            <a
                                *ngIf="(data.status == 1 || data.status == 2) && permission.userPermission.has('marketing:descentManage:stop')"
                                class="confirm-box"
                                nz-button
                                nzType="link"
                                nzSize="small"
                                nzDanger
                                nz-popconfirm
                                nzPopconfirmTitle="确定停止该活动？停止后不可重新启动"
                                [nzIcon]="iconTpl"
                                (nzOnConfirm)="stopDelete(0, data)">停止</a>
                            <ng-template #iconTpl>
                                <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                            </ng-template>

                            <a
                                *ngIf="data.status == 5 && permission.userPermission.has('marketing:descentManage:delete')"
                                class="confirm-box"
                                nz-button
                                nzType="link"
                                nzSize="small"
                                nzDanger
                                nz-popconfirm
                                nzPopconfirmTitle="确认删除？不可以反悔的哦"
                                [nzIcon]="iconTpl1"
                                (nzOnConfirm)="stopDelete(1, data)">删除</a>
                            <ng-template #iconTpl1>
                                <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                            </ng-template>

                            <button
                                *ngIf="[1, 2].includes(data.status)"
                                nz-button
                                nzSize="small"
                                nzType="link"
                                nz-popconfirm
                                nzPopconfirmTitle="确认生成商品标签?"
                                (nzOnConfirm)="generateGoodLable(data)">
                                生成商品标签
                            </button>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
    
            <!-- 分页template -->
            <ng-template #totalTemplate let-total>共有 {{ tableForms.total }} 条</ng-template>
        </div>
    </main>
</nz-card>